<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Remote mode options')"
    width="500px"
    @close="store.hide()"
  >
    <el-card>
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="8">
          <label>{{ t('Start POSIX time') }}:</label>
        </el-col>
        <el-col :span="10">
          <el-input
            v-model="store.posixTime"
            type="number"
            :readonly="!store.isCustomized"
          />
        </el-col>
        <el-col :span="6">
          <el-checkbox v-model="store.isCustomized">
            {{ t('Customized') }}
          </el-checkbox>
        </el-col>
      </el-row>
    </el-card>

    <template #footer>
      <el-button type="primary" @click="store.confirm()">
        {{ t('OK') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useRemoteModeOptionsStore } from '@/stores/remoteModeOptions'
import { useLanguageStore } from '@/stores/language'

const store = useRemoteModeOptionsStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Remote mode options': {
      'en': 'Remote mode options',
      'zh': '远程模式选项'
    },
    'Start POSIX time': {
      'en': 'Start POSIX time',
      'zh': '起始POSIX时间'
    },
    'Customized': {
      'en': 'Customized',
      'zh': '自定义'
    },
    'OK': {
      'en': 'OK',
      'zh': '确认'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>